'use client';

import { useQuery } from '@tanstack/react-query';
import type {
  IConfigEmail,
  IConfigImage,
  IConfigJwt,
  IConfigPhone,
  IConfigPost,
  IConfigQq,
  IConfigSection,
  IConfigSite,
  IConfigUser,
} from '@/interfaces';
import { IConfigOauthClient } from '@/interfaces';
import {
  queryEmailConfig,
  queryImageConfig,
  queryJwtConfig,
  queryOauthClientConfig,
  queryPhoneConfig,
  queryPostConfig,
  queryQqConfig,
  querySectionConfig,
  querySiteConfig,
  queryUserConfig,
} from '@/services/api';
import Alert from '@/app/[locale]/alert/alert';
import { useContext } from 'react';
import { ConfigAdminContext } from '@/contexts/admin/config';
import AlertLoad from '@/app/[locale]/alert/load';
import QueryConfigUser from '@/app/[locale]/admin/config/detail/user';
import QueryConfigSection from '@/app/[locale]/admin/config/detail/section';
import QueryConfigPost from '@/app/[locale]/admin/config/detail/post';
import QueryConfigSite from '@/app/[locale]/admin/config/detail/site';
import QueryConfigJwt from '@/app/[locale]/admin/config/detail/jwt';
import QueryConfigQq from '@/app/[locale]/admin/config/detail/qq';
import QueryConfigEmail from '@/app/[locale]/admin/config/detail/email';
import QueryConfigPhone from '@/app/[locale]/admin/config/detail/phone';
import QueryConfigImage from '@/app/[locale]/admin/config/detail/image';
import QueryConfigOauthClient from '@/app/[locale]/admin/config/detail/oauthClient';

export default function DetailsConfigAdminPage() {
  const context = useContext(ConfigAdminContext);
  const id = context.detailItem?.id;

  const queryConfigDetailsQuery = useQuery(['/configs', `/${id}`], async () => {
    if (id === 'user') {
      return (await queryUserConfig()) as IConfigUser;
    } else if (id === 'section') {
      return (await querySectionConfig()) as IConfigSection;
    } else if (id === 'post') {
      return (await queryPostConfig()) as IConfigPost;
    } else if (id === 'site') {
      return (await querySiteConfig()) as IConfigSite;
    } else if (id === 'jwt') {
      return (await queryJwtConfig()) as IConfigJwt;
    } else if (id === 'qq') {
      return (await queryQqConfig()) as IConfigQq;
    } else if (id === 'email') {
      return (await queryEmailConfig()) as IConfigEmail;
    } else if (id === 'phone') {
      return (await queryPhoneConfig()) as IConfigPhone;
    } else if (id === 'image') {
      return (await queryImageConfig()) as IConfigImage;
    } else if (id === 'client') {
      return (await queryOauthClientConfig()) as IConfigOauthClient;
    }
  });

  if (queryConfigDetailsQuery.data) {
    const data = queryConfigDetailsQuery.data;

    return (
      <div className="row">
        <div className="col">
          <div className="vstack gap-4">
            {id === 'user' && <QueryConfigUser details={data as IConfigUser} />}

            {id === 'section' && (
              <QueryConfigSection details={data as IConfigSection} />
            )}

            {id === 'post' && <QueryConfigPost details={data as IConfigPost} />}

            {id === 'site' && <QueryConfigSite details={data as IConfigSite} />}

            {id === 'jwt' && <QueryConfigJwt details={data as IConfigJwt} />}

            {id === 'qq' && <QueryConfigQq details={data as IConfigQq} />}

            {id === 'email' && (
              <QueryConfigEmail details={data as IConfigEmail} />
            )}

            {id === 'phone' && (
              <QueryConfigPhone details={data as IConfigPhone} />
            )}

            {id === 'image' && (
              <QueryConfigImage details={data as IConfigImage} />
            )}

            {id === 'client' && (
              <QueryConfigOauthClient details={data as IConfigOauthClient} />
            )}

            <div></div>
          </div>
        </div>
      </div>
    );
  }

  if (queryConfigDetailsQuery.error) {
    return <Alert type="error" message={queryConfigDetailsQuery.error} />;
  }

  return <AlertLoad />;
}
